<template>
	<h1>招生目录信息</h1>
	<div v-for="(primarySubject, primaryId) in subjects" :key="id">
		<h2>{{ primarySubject.id }} {{ primarySubject.name }}  {{ primarySubject.type }} {{ primarySubject.total_num }} {{ primarySubject.supply_num }} </h2>
		<el-table
			:data="primarySubject.secondary_subjects"
			stripe 
			style="margin: 20px auto;"
		>
			<!-- <el-table-column label="编号" prop="id"/> -->
			<el-table-column label="ID" prop="id"/>
			<el-table-column label="名称" prop="name"/>
			<el-table-column label="描述" prop="description"/>
			<el-table-column label="初始科目一" prop="initial_subject1"/> 
			<el-table-column label="初始科目二" prop="initial_subject2"/>
			<el-table-column label="初试科目三" prop="initial_subject3"/>
			<el-table-column label="初试科目四" prop="initial_subject4"/>
			<el-table-column label="复试科目一" prop="interview_subject1"/>
			<el-table-column label="复试科目二" prop="interview_subject2"/>
			<el-table-column label="学科老师" prop="tutors"/>
		</el-table>
	</div>
</template>
 
<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
// import SubjectList from '@/components/SubjectList.vue';
import {ElMessageBox} from 'element-plus'
	
const list1 = reactive([])
const getJobs = () =>{
	const token = sessionStorage.getItem('token')
	axios.get("http://127.0.0.1:5000/jobs", {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then(res => {
		list1.splice(0,list1.length)
		list1.push(...res.data.results)
		console.log(res.data.results);
	})
}
const subjects = ref([])
const getSubjects = () =>{
		const token = sessionStorage.getItem('token')
		axios.get("http://127.0.0.1:5000/subjects", {
			headers: {
				Authorization: `Bearer ${token}`
			}
		}).then(res => {
			console.log(res);
			console.log(res.data);
			console.log(typeof(res.data	));
			subjects.value = res.data
		})
	}

onMounted(()=>{
	getSubjects()
	getJobs()
})

// 编辑表单
let edit_dialog_visible = ref(false)
const handleEdit = (index, row) => {
	for(let key in row) {
		job_form[key] = row[key]
	}
	edit_dialog_visible.value = true
}

// 添加表单
let add_dialog_visible = ref(false)


// 删除表单
const handleDelete = (index, row) => {
	console.log(row.id);
	const token = sessionStorage.getItem('token')
	axios.delete(`http://localhost:5000/jobs/${row.id}`, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then(() => {
		getJobs()
	})
}

let list2 = [1,2,3]
const ruleFormRef = ref()
const editFormRef = ref()
const job_form = reactive({
	id: "",
	job_people: "",
	job_content: "",
	job_last_date: "",
	job_important: "",
	job_delay: "",
	job_delay_reason: "",
})

// const handleClose = (done) => {
// 	ElMessageBox.confirm('确认关闭？')
//   		.then(() => {
// 			done();
// 		})
// 		.catch(() => {
// 		});
// }

const submitEditForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.put(`http://localhost:5000/jobs/${job_form.id}`, job_form, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then((res) => {
		formEl.resetFields()
		edit_dialog_visible.value = false
		getJobs()
	})
}

const submitForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.post('http://localhost:5000/jobs', job_form, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then(() => {
		add_dialog_visible.value = false
		formEl.resetFields()
		getJobs()
	})
}
// 重置表单
const resetForm = (formEl) => {
	formEl.resetFields()
}
</script>

<style scoped>
h1{
	display: block;
	width: 50%;
	margin: 0,auto;
}
/* .job1{
	float: left;
	width: 50%;
}
.job2{
	float: left;
	width: 50%;
} */
</style>